<html>
    <head>
        <title>Itowns - COPC 3D loader</title>

        <script type="importmap">
        {
            "imports": {
                "itowns": "../dist/itowns.js",
                "debug": "../dist/debug.js",
                "lil": "https://unpkg.com/lil-gui@0.20.0/dist/lil-gui.esm.js",
                "GuiTools": "./jsm/GUI/GuiTools.js",
                "LoadingScreen": "./jsm/GUI/LoadingScreen.js",
                "itowns_widgets": "../dist/itowns_widgets.js",
                "three": "https://unpkg.com/three@0.174.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.174.0/examples/jsm/",
                "dat": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js"
            }
        }
        </script>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <style type="text/css">
            #description {
                z-index: 2;
                left: 10px;
            }
        </style>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- <script src="https://cdn.jsdelivr.net/npm/lil-gui@0.19"></script> -->
    </head>
    <body>
        <div id="description">Specify the URL of a COPC file to load:
            <input type="text" id="loadUrl" />
            <button id="loadUrlBtn">Load</button>
            <button id='loadLidarHDBtn'>Load LiDAR HD dataset</button>
            <div id="share"></div>
        </div>
        <div id="viewerDiv"></div>

        <!-- <script src="../dist/itowns.js"></script>
        <script src="js/GUI/LoadingScreen.js"></script>
        <script src="../dist/debug.js"></script> -->
        <!-- <script type="text/javascript"> -->
        <script type="module">

            import lil from 'lil';
            import GuiTools from 'GuiTools';
            import setupLoadingScreen from 'LoadingScreen';
            import * as THREE from 'three';
            import * as itowns from 'itowns';
            import * as debug from 'debug';
            import * as itowns_widgets from 'itowns_widgets';

            var debugGui = new lil();
            var viewerDiv = document.getElementById('viewerDiv');

            var view = new itowns.GlobeView(viewerDiv);

            // Add one imagery layer to the scene and the miniView
            // This layer is defined in a json file but it could be defined as a plain js
            // object. See Layer* for more info.
            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ColorLayer('Ortho', config);
                view.addLayer(layer);
            });
            // Add two elevation layers.
            // These will deform iTowns globe geometry to represent terrain elevation.
            function addElevationLayerFromConfig(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ElevationLayer(config.id, config);
                view.addLayer(layer);
            }
            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);

            var layer;

            // Check if an url had been given as an argument
            // and parse to get url and options.
            const urlParams = new URL(location.href).searchParams
            let url = urlParams.get('copc');
            urlParams.delete('copc');

            const options = {};
            for (const [k, v] of urlParams) {
                options[k] = isNaN(parseFloat(v, 10)) ? v : parseFloat(v, 10);
            }

            loadCopc(url, options);

            function onLayerReady() {
                var lookAt = layer.root.clampOBB.position;
                var coordLookAt = new itowns.Coordinates(view.referenceCrs).setFromVector3(lookAt);

                var size = new THREE.Vector3();
                layer.root.voxelOBB.box3D.getSize(size);

                view.controls.lookAtCoordinate({
                    coord: coordLookAt,
                    range: 2 * size.length(),
                }, false);
            }

            function loadCopc(url, options) {
                if(!url) return;

                // Share the view
                document.getElementById('share').innerHTML = '<a href="' +
                    location.href.replace(location.search, '?copc=' + url) +
                    '" target="_blank">Link to share this view</a>';

                const source = new itowns.CopcSource({ url });

                if (layer) {
                    layer.debugUI.destroy();
                    view.removeLayer('COPC');
                    view.notifyChange();
                    layer.delete();
                }

                const config = {
                    source,
                    crs: view.referenceCrs,
                    sseThreshold: 2,
                    pointBudget: 3000000,
                    ...options,
                }

                layer = new itowns.CopcLayer('COPC', config);

                itowns.View.prototype.addLayer.call(view, layer).then(onLayerReady);

                layer.whenReady
                    .then(() => debug.PointCloudDebug.initTools(view, layer, debugGui));
            }

            const loadUrlBtn = document.getElementById('loadUrlBtn');
            loadUrlBtn.addEventListener('click', () => {
                const url = document.getElementById('loadUrl').value;
                if (url) { loadCopc(url); }
            });

            const loadLidarHDBtn = document.getElementById('loadLidarHDBtn');
            loadLidarHDBtn.addEventListener('click', () => {
                const url ="https://dl-lidar.ign.fr/ppk-lidar/ML/LHD_FXX_0746_6509_PTS_C_LAMB93_IGN69.copc.laz" // fixed with proxy
                const options = {
                    mode: 2,
                    opacity: 0.5,
                }
                loadCopc(url, options);
            });
        </script>
    </body>
</html>
